<template>
	<div class='content'>
		<div class="profile_page">
			<head-top :go-back='goBack' :head-title="profiletitle"></head-top>
		</div>
		<div class="formContain">
			<div class="selectTime" @click="showdatepicker($event)">
				<input type="text" id="begin" placeholder="请选择时间" :value="currentTime" readonly>
			</div>
			
		</div>
		<div class="formContain" style="margin-top: 10px;">
			<titlebar :title-left='titleLeft1'></titlebar>
                        <van-empty v-if="atndShow" description="暂无考勤数据" />
						<ul v-if="!atndShow">
							<li class="flex">
								<span class="label">考勤周期</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.atndYearMonth}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">应出勤（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.shouldAttendanceDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">实际出勤（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.actualAttendanceDay}}
									</span>
								</div>
							</li>
						<!--	<li class="flex">
								<span class="label">未出勤（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.noAttendanceDay}}
									</span>
								</div>
							</li>-->
							<li class="flex">
								<span class="label">旷工（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.unworkDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">早退（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.leaveEarlyTimes}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">迟到（次）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.lateTimes}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">病假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.sickLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">事假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.thingLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">丧假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.bereavementLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">婚假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.marriageLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">产假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.maternityLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">陪产假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.paternityLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">哺乳假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.lactationLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">年休假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.paidannualLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">工伤假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.injuryLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">出差（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.ygccLeaveDay}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">公出（小时）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.ygwcLeave}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">调休（小时）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.compensatoryLeave}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">其他假（天）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.compensatoryLeave}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">休息天数</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.vacationDays}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">日常加班（小时）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.dailyOvertime}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">周末加班（小时）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.weekendOvertime}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">节假日加班（小时）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.holidayOvertime}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">迟到时长（小时）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.lateHours}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">早退时长（小时）</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.leaveEarlyHours}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">上班未打卡次数</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.workOnWontClock}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">下班未打卡次数</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.workOffWontClock}}
									</span>
								</div>
							</li>
							<li class="flex">
								<span class="label">补卡次数</span>
								<div>
									<span style="font-size: 0.48rem">
										{{data.overtimeClock}}
									</span>
								</div>
							</li>
						</ul>
			
						<van-popup v-model="show" position="bottom">
							<van-datetime-picker type="year-month" @confirm="datetimeSelect" @cancel='cancel' :max-date="maxDate"/>
						</van-popup>
		</div>
	</div>
</template>
<script>
	import headTop from '@/components/header/head';
	import titlebar from '@/components/titlebar3/titlebar3';
	import {
		getPersonAtndData
	} from '@/service/getData';
	export default {
		data() {
			return {
				profiletitle: '人员考勤信息',
				titleLeft1:"考勤信息",
				goBack: true,
				show: false,
                atndShow: false,
				data:'',
				currentTime: new Date().getFullYear() + "-" + ((new Date().getMonth() + 1) >= 10 ? (new Date().getMonth()) : (
					'0' + (new Date().getMonth()))),
                maxDate:new Date(2025, 10, 1),
                //minDate: new Date(1950, 0, 1),
			}
		},
		components: {
			headTop,
			titlebar
		},
        created(){
            let now = new Date();
            let maxYear = '';
            let maxMonth = '';
            if(now.getMonth() == 0){
                this.currentTime =  now.getFullYear()-1+'-12';
                this.currentTime1 = now.getFullYear()-1+'12';
                maxYear = now.getFullYear()-1;
                maxMonth = 11;
            }else {
                this.currentTime =  now.getFullYear() + '-'+this.addZero(now.getMonth());
                this.currentTime1 =  now.getFullYear() + this.addZero(now.getMonth());
                maxYear = now.getFullYear();
                maxMonth = now.getMonth()-1;
            }
            this.maxDate = new Date(maxYear,maxMonth,1);
        },
		mounted() {
			let personId = this.$route.query.id;
			//this.currentTime1 = new Date().getFullYear() +''+ ((new Date().getMonth() + 1) >= 10 ? (new Date().getMonth()+1) : ('0' + (new Date().getMonth()+1)));
			getPersonAtndData({
				personId: personId,
				yearAndMonth: this.currentTime1
			}).then(res => {
			    if(res.data){
                    this.data = res.data;
                }else {
                    this.atndShow = true;
                }

			});
		},
		methods: {
            addZero(num){
                var addNum = num<10?"0"+num:num;
                return addNum;
            },
			datetimeSelect(val) {
				let personId = this.$route.query.id;

				this.currentTime = new Date(val).getFullYear() + "-" + ((new Date(val).getMonth() + 1) >= 10 ? (new Date(val).getMonth() +
					1) : ('0' + (new Date(val).getMonth() + 1)));
				this.show = false;
				this.currentTime1 = new Date(val).getFullYear() + String(((new Date(val).getMonth() + 1) >= 10 ? (new Date(val).getMonth() +
					1) : ('0' + (new Date(val).getMonth() + 1))));
				getPersonAtndData({
					personId: personId,
					yearAndMonth: this.currentTime1
				}).then(res => {
                    if(res.data){
                        this.data = res.data;
                        this.atndShow = false;
                    }else {
                        this.atndShow = true;
                    }
				});
			},
			cancel() {
                this.show = false;
			},

			showdatepicker() {
				this.show = true;
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '../../assets/style/mixin';
	@import '../../assets/style/public';

	.formContain {
		background: #fff;

		>table {
			width: 100%;
			border-collapse: collapse;

			td {
				font-size: .56rem;
				color: #444;
				border-bottom: 1px solid #e0e0e0;
				line-height: 2rem;
				text-align: center;
				width: 33.3%;
			}
		}

		ul {
			padding: 0 .54rem;

			.flex {
				justify-content: space-between;
				align-items: center;
				line-height: 2rem;
				border-bottom: 1px solid #e0e0e0;
				padding: 0 .3rem;

				&:nth-last-of-type(1) {
					border: none;
                    margin-bottom: 2rem;
				}

				.label {
					font-size: .56rem;
					line-height: 2rem;
					color: #333333;
				}

				div {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					position: relative;
					flex-grow: 1;

					img {
						width: .68rem;
						height: .64rem;
					}

					input {
						color: #323233;
						text-align: right;
						font-size: .48rem;
						padding-right: .48rem;
						border: none;

						&:-ms-input-placeholder {
							color: #aaa;
							font-size: .48rem;

						}
					}

					.file {
						width: 2rem;
						height: 1rem;
						font-size: 10rem;
						opacity: 0;
						position: absolute;
						right: 0;
					}

					.van-cell {
						font-size: .48rem;
						padding-right: .48rem;
						padding: 0;
						color: #aaa;

						.van-field__control {
							color: #aaa;
						}
					}

				}
			}
		}
	}

	.foot-button {
		margin-top: 2rem;
		margin-bottom: .4rem;

		.cancel-btn {
			margin-right: 1rem;
		}
	}

	.require {
		color: red;
		margin-right: 4px;
		font-style: inherit;
		font-size: 14px;
	}

	.showPwd {
		margin-top: 7rem;
	}

	.selectTime {
		border-bottom: 1px solid #eee;

		input {
			width: 97%;
			text-align: center;
			border: none;
			height: 33px;
			font-size: 0.6rem;
		}
	}

	.newsItem {
		padding-top: 0.5rem;

		.itemDate {
			display: flex;
			justify-content: center;
			font-size: 0.6rem;
			color: #cccccc;
			height: 1.6rem;
			line-height: 1.6rem;
		}

		.itemContent {
			margin: 0 0.5rem;
			background-color: #fff;
			padding: 0 0.4rem;
			border-top-left-radius: 0.2rem;
			border-top-right-radius: 0.2rem;
			position: relative;
			z-index: 99;

			.itemConHead {
				display: flex;
				align-items: center;
				font-size: 0.6rem;
				color: #333333;
				line-height: 0.8rem;
				padding: 0.6rem 0;
				border-bottom: 1px solid #eee;
				justify-content: center;
				font-weight: 600;
			}

			.itemLists {
				padding: 0.08rem;

				.itemList {
					display: flex;
					padding: 0.32rem 0;
					align-items: center;
					justify-content: flex-end;

					.itemName {
						color: #999999;
						font-size: 0.56rem;
						flex: 1;
						word-break: keep-all;
					}

					.itemType {
						margin-left: 0.4rem;
						color: #666666;
						font-size: 0.56rem;
						width: 5rem;
						white-space: normal;
						word-break: break-all;
						text-align: right;
					}
				}
			}
		}

		.itemNav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #1f9eff;
			font-size: 0.6rem;
			height: 1.2rem;
			line-height: 1.2rem;
			margin: 0 0.5rem;
			padding: 0.4rem;
			background-color: #fff;
			border-bottom-left-radius: 0.2rem;
			border-bottom-right-radius: 0.2rem;
			overflow: hidden;

		}
	}

	/deep/ #yearPicker .van-picker__columns>div:nth-of-type(2) {
		display: none;
	}
</style>
